<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* css reset 开始 */
			html,body{height: 100%;overflow: hidden;}
			html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
			a{text-decoration: none;display: block;}
			li{list-style: none;}
			img{display: block;}
			/* css reset 结束 */
			
			/* 公共样式 开始 */
			.clearfix{*zoom: 1;}
			.clearfix:after{content: "";display: block;clear: both;}
			.commonTitle{color: #009ee0;font-size: 80px;line-height: .8;font-weight: bold;letter-spacing: -5px;}
			.commonText{color: white;line-height: 1.5;font-size: 15px;}
			/* 公共样式 结束 */
			
			/* 头部样式 开始 */
			#head{background: white !important;width: 100%;}
			#head .headMain{width: 1100px;height: 80px;margin: 0 auto;position: relative;}
			#head .headMain > .logo{float: left;margin-top: 30px;}
			#head .headMain > .nav{float: right;margin-top: 50px;}
			#head .headMain > .nav > .list > li {float: left; margin-left: 40px;position: relative;}
			#head .headMain > .nav > .list > li > a > .up {color: black;position: absolute;width: 0;overflow: hidden;transition: 1s width;}
			#head .headMain > .nav > .list > li:hover .up {width: 100%;}
			#head .headMain > .arrow{width: 21px;height: 11px;background: url(img/menuIndicator.png);position: absolute;left: 50%;bottom: -11px;transition: .5s left;z-index: 1;}
			/* 头部样式 结束 */
			
			/* 内容区域 开始 */
			/*width: 100%;说明使用的是流体布局*/
			#content{height: 300px;background: gray;position: relative;overflow: hidden;width: 100%;}
			#content > .list{position: absolute;left: 0;top: 0;width: 100%;transition: 1s top;}
			/* 
			background-position: 50% 50%; 
			就是让背景图居中铺设
			或者使用 background-position: center;
			这里添加 !important 是为了防止后面的 #content .list > .home{background: url(img/bg1.jpg) no-repeat;} 覆盖
			*/
			#content > .list > li{position: relative;background-position: 50% 50% !important;}
			#content > .list > li > section{width: 1100px;height: 520px;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;}
			#content > .list > .home{background: url(img/bg1.jpg) no-repeat;}
			#content > .list > .course{background: url(img/bg2.jpg) no-repeat;position: relative;}
						
			/*第三屏 开始*/
			#content > .list > .works{background: url(img/bg3.jpg) no-repeat;position: relative;}
			/*
			注意这里不能写
			#content > .list > .works > .works1
			这样写因为works和works1之间有一个section会选不到works1
			*/
			#content > .list > .works .works1{margin: 50px 0px 100px 50px;}
			#content > .list > .works .works2{margin-left: 50px;}
			#content > .list > .works .works2 > .item{float: left;width: 220px;height: 133px;margin: 0 1px;position: relative;overflow: hidden;}
			#content > .list > .works .works2 > .item:last-child{width: 332px;}
			/*这里使用box-sizing:border-box，再设置padding，就可以增加内边距。*/
			#content > .list > .works .works2 > .item > .mask{position: absolute;left: 0;right: 0;top: 0;bottom: 0;box-sizing: border-box;padding: 10px;background: #000000;
																opacity: 0;color: white;transition: .5s opacity;}
			#content > .list > .works .works2 > .item > .mask > .icon{width: 32px;height: 34px;background: pink;margin: 10px auto 0;background: url(img/zoomico.png) no-repeat;
																		transition: .3s background-position-y;}
			/*显示同一张图片的不同内容，使用background-position*/
			#content > .list > .works .works2 > .item > .mask > .icon:hover{background-position-y: -35px;}
			#content > .list > .works .works2 > .item:hover .mask{opacity: .8;}
			#content > .list > .works .works2 > .item > img{transition: .3s transform;}
			#content > .list > .works .works2 > .item:hover img{transform: rotateZ(30deg) scale(1.5);}
			/*机器人移动动画*/
			#content > .list > .works .works3{width: 167px;height: 191px;background: url(img/robot.png);position: absolute;left: 900px;top: 170px;
												animation: works3Move 5s linear infinite;}
			/*这里的移动要注意*/
			@keyframes works3Move{
				0%{transform: translateX(0px) rotateY(0deg);}
				49%{transform: translateX(-490px) rotateY(0deg);}
				50%{transform: translateX(-500px) rotateY(180deg);}
				100%{transform: translateX(0px) rotateY(180deg);}
			}
			/*第三屏 结束*/
			
			/*第二屏 开始*/
			#content > .list > .course .course1{margin: 50px;}
			#content > .list > .course .course2{margin-left: 50px;width: 400px;}
			#content > .list > .course .course3{position: absolute;width: 480px;right: 50px;top: 70px;}
			#content > .list > .course .course3 > .line{position: absolute;top: -5px; width: 9px;height: 410px;background: url(img/plus_row.png) no-repeat;}
			#content > .list > .course .course3 > .line:nth-of-type(1){left: -5px;}
			#content > .list > .course .course3 > .line:nth-of-type(2){left: 115px;}
			#content > .list > .course .course3 > .line:nth-of-type(3){left: 235px;}
			#content > .list > .course .course3 > .line:nth-of-type(4){left: 355px;}
			#content > .list > .course .course3 > .line:nth-of-type(5){left: 475px;}
			/*填满整个div 这里要记得加上3d舞台效果，才有层级 transform-style*/
			#content > .list > .course .course3 > .item{width: 120px;height: 132px;float: left;position: relative;transform-style: preserve-3d;}
			#content > .list > .course .course3 > .item .backface,
			#content > .list > .course .course3 > .item .face{position: absolute;left: 0;top: 0;width: 100%;height: 100%;box-sizing: border-box;padding: 15px;}
			
			/*注意这里要加上 !important，否则不会奏效。*/
			#content > .list > .course .course3 > .item .backface{background-position: center !important;transition: 3s transform;}
			#content > .list > .course .course3 > .item .face{transform: rotateY(180deg);backface-visibility: hidden;transition: 3s transform;background: #009ee0;color: white;}
			
			#content > .list > .course .course3 > .item:nth-of-type(1) .backface{background: url(img/apcoa.png) no-repeat;}
			
			#content > .list > .course .course3 > .item:hover .backface{transform: rotateY(180deg);}
			#content > .list > .course .course3 > .item:hover .face{transform: rotateY(360deg);}
			/*第二屏 结束*/
			
			/*第一屏 开始*/
			#content > .list > .home{background: url(img/bg1.jpg) no-repeat;}
			#content > .list > .home .home1,
			#content > .list > .home .home1 > li{width: 100%;height: 100%;}
			/*设置景深，打开3d效果*/
			#content > .list > .home .home1{perspective: 1000px;transform-style: preserve-3d;}
			/*
			这个li的上一层是section，使用的是absolute定位，所以相对的是section定位
			这里的li，默认是看不见的。
			*/
			#content > .list > .home .home1 > li{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;visibility: hidden;}
			#content > .list > .home .home1 > li:nth-child(1){background: #dc6c5f;}
			#content > .list > .home .home1 > li:nth-child(2){background: #95dc84;}
			#content > .list > .home .home1 > li:nth-child(3){background: #64b9d2;}
			#content > .list > .home .home1 > li:nth-child(4){background: #000000;}
			#content > .list > .home .home1 > li > .item{color: white;text-align: center;line-height: 520px;}
			/*css选择标签中的类*/
			#content > .list > .home .home1 > li.active{visibility: visible;}
			
			#content > .list > .home .home2{text-align: center;position: absolute;left: 0;right: 0;bottom: 0;margin: auto;}
			/*
			鼠标放在当前图片，变成手的样子。
			cursor: pointer;
			已经被选中的图片，使用默认样式。表示已经被选中。
			cursor: default;
			*/
			#content > .list > .home .home2 > li{border-radius: 50%;width: 20px;height: 20px;
			background: rgba(255,255,255,.5);display: inline-block;cursor: pointer;}
			#content > .list > .home .home2 > li.active{background: white;cursor: default;}
			
			/*
			教程分析
			1、从左到右 左边隐藏；从右到左 右边显示；
			自己分析
			1、@keyframes中，才是开始要运行的动画，运行完成，最后的动画状态就是 li.leftHide
			2、animation: 1s rightShow 1 linear;表示动画持续1s，运行的是rightShow关键帧，动画运行1次（这里可以填写infinity）
			*/
			#content > .list > .home .home1 > li.leftHide{visibility: hidden;animation: 1s leftHide 1 linear;}
			#content > .list > .home .home1 > li.rightShow{visibility: visible;animation: 1s rightShow 1 linear;}
			@keyframes leftHide{
				0%{visibility: visible;}
				50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
				100%{transform: translateZ(-200px);}
			}
			@keyframes rightShow{
				0%{visibility: hidden;transform: translateZ(-200px);}
				50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
				100%{}
			}
			
			/*
			上面的过程反过来
			*/
			#content > .list > .home .home1 > li.leftShow{visibility: visible;animation: 1s leftShow 1 linear;}
			#content > .list > .home .home1 > li.rightHide{visibility: hidden;animation: 1s rightHide 1 linear;}
			@keyframes leftShow{
				0%{visibility: hidden;transform: translateZ(-200px);}
				50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
				100%{}
			}
			@keyframes rightHide{
				0%{visibility: visible;}
				50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
				100%{transform: translateZ(-200px);}
			}
			
			/*第一屏 结束*/
			
			#content > .list > .about{background: url(img/bg4.jpg) no-repeat;}
			#content > .list > .team{background: url(img/bg5.jpg) no-repeat;}
			/* 内容区域 结束 */
		</style>
	</head>
	<body>
		<!-- section用来充当视口的 -->
		<section id="wrap">
			<!-- 流体布局 -->
			<header id="head">
				<!-- 固定布局 -->
				<div class="headMain">
					<!-- logo -->
					<h1 class="logo">
						<a href="javascript:;">
							<img src="img/logo.png" >
						</a>
					</h1>
					<nav class="nav">
						<ul class="list clearfix">
							<li>
								<a href="javascript:;">
									<div class="up"><img src="img/home_gruen.png" ></div>
									<div class="down"><img src="img/home.png" ></div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Course</div>
									<div class="down">Course</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Works</div>
									<div class="down">Works</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">About</div>
									<div class="down">About</div>
								</a>
							</li>
							<li>
								<a href="javascript:;">
									<div class="up">Team</div>
									<div class="down">Team</div>
								</a>
							</li>
						</ul>
					</nav>
								
					<div class="arrow"></div>
				</div>
				
				
			</header>
			<section id="content">
				<ul class="list">
					<li class="home">
						<section>
							<ul class="home1">
								<li class="commonTitle active leftShow">
									<div class="item">one layer</div>
								</li>
								<li class="commonTitle rightHide">
									<div class="item">two layer</div>
								</li>
								<li class="commonTitle">
									<div class="item">three layer</div>
								</li>
								<li class="commonTitle">
									<div class="item">four layer</div>
								</li>
							</ul>
							<ul class="home2">
								<li class="active"></li>
								<li></li>
								<li></li>
								<li></li>
							</ul>
						</section>
					</li>
					<li class="course">
						<section>
							<header class="course1 commonTitle">
								<span>EINBICK</span> <br>
								<span>ERKENTN</span> <br>
								<span>ERGEBNIS</span> <br>
							</header>
							<div class="course2 commonText">
								<p>
									测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 测试用文字 course 
									<br>
									测试用文字 course
									<br>
								</p>
							</div>
							<div class="course3">
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<span class="line"></span>
								<div class="item">
									<!-- 
									注意这里的顺序。
									先画的是backface，后画face。
									那么页面上最先看到的就是face。
									face的css中有 backface-visibility: hidden; 也就是看不到backface
									 -->
									<div class="backface">backface测试文字</div>
									<div class="face">face 这里如果填的是数字，那么就会认为是一个整数，不会换行。</div>
								</div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
								<div class="item"></div>
							</div>
						</section>
					</li>
					<li class="works">
						<section>
							<header class="works1 commonTitle">
								<span>EINBICK</span> <br>
								<span>ERKENTN</span> <br>
								<span>ERGEBNIS</span> <br>
							</header>
							<div class="works2">
								<div class="item">
									<img src="img/worksimg1.jpg" >
									<div class="mask">
										<span>测试文字 works测试文字 works测试文字 works测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg2.jpg" >
									<div class="mask">
										<span>测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg3.jpg" >
									<div class="mask">
										<span>测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
								<div class="item">
									<img src="img/worksimg4.jpg" >
									<div class="mask">
										<span>测试文字 works</span>
										<div class="icon"></div>
									</div>
								</div>
							</div>
							<div class="works3"></div>
						</section>
					</li>
					<li class="about">
						<section>about</section>
					</li>
					<li class="team">
						<section>team</section>
					</li>
				</ul>
			</section>
		</section>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			// 修改导航栏中的arrow的位置
			// 获取箭头的dom元素
			var arrowEl = document.querySelector("#head .headMain > .arrow");
			var liNodes = document.querySelectorAll("#head .headMain > .nav > .list > li");
			var liUpNodes = document.querySelectorAll("#head .headMain > .nav > .list > li > a > .up");
			var firstLiNode = liNodes[0];
			var firstLiUpNode = firstLiNode.querySelector(".up");
			
			var head = document.querySelector("#head");
			var content = document.querySelector("#content");
			var contentLiNodes = document.querySelectorAll("#content .list > li");
			var contentList = document.querySelector("#content .list");
			
			var gIndex = 0;
			var timer;
			
			// 登录网站，默认选中当前项。移动arrow的位置
			arrowEl.style.left = firstLiNode.offsetLeft + firstLiNode.offsetWidth/2 - arrowEl.offsetWidth/2 + "px";
			// 默认选中了第一个li,那么需要动画.这里注意要加双引号
			firstLiUpNode.style.width = "100%";
			
			/*头部的设置*/
			function headBind(){
				for (var i = 0; i < liNodes.length; i++) {
					liNodes[i].index = i;
					liNodes[i].onclick=function(){
						var gIndex = this.index;
						move(this.index)
					}
				}
			}
			/*内容区 开始*/
			function contentBind(){
				var temp = document.documentElement.clientHeight - head.offsetHeight + "px";
				// document.documentElement.clientHeight 是当前视口
				content.style.height = temp;
				for (var i = 0; i < contentLiNodes.length; i++) {
					contentLiNodes[i].style.height = temp;
				}
			}
			function fn(ev){
				ev = ev||event;
				var dir="";
				var length = liNodes.length-1;
				
				if(ev.wheelDelta){
					dir = ev.wheelDelta>0 ? "up":"down";
				}else if(ev.detail){
					dir = ev.detail<0 ? "up":"down";
				}
				
				// console.log(dir);
				
				switch (dir){
					case "up":
						if(gIndex>0){
							gIndex--;
							move(gIndex);
						}
						break;
					case "down":
						if(gIndex<length){
							gIndex++;
							move(gIndex);
						}
						break;
					default:
						break;
				}
			}
			/*
			如果频繁的滑动鼠标滚轮，那么页面切换太频繁影响体验。
			需要设置间隔时间
			*/
			function timeSettings(callbackFunc,ev){
				clearTimeout(timer);
				timer = setTimeout(function(){
					callbackFunc(ev);
				},300);
			}
			function contentScroll(){
				function tempFn(ev){
					timeSettings(fn,ev);
				}
				
				if(content.addEventListener) {
					content.addEventListener("DOMMouseScroll",tempFn)
				}
				content.onmousewheel=tempFn;
			}
			/*内容区 结束*/
			function move(index){
				index = index || gIndex;
				// liUpNodes[i] 注意,这里这样写是获取不到upnodes的,比如我要点第一个li下的up,但是i因为for循环已经到最后一个了.
				var up = liUpNodes[index]
				var li = liNodes[index]
				
				// 其他导航节点恢复原样
				for (var i = 0; i < liUpNodes.length; i++) {
					// 为什么教程这里这样写: liUpNodes[i].style.width=""; 而不是 liUpNodes[i].style.width="0";
					// 因为这样写,hover中style的样式权重比默认的要高,并且为0.那么会影响后面的动画.
					liUpNodes[i].style.width="";
				}
				
				// 移动arrow的动画
				arrowEl.style.left = li.offsetLeft + li.offsetWidth/2 - arrowEl.offsetWidth/2 + "px";
				// 移动字体黑色的部分,渐变颜色.
				up.style.width = "100%";
				
				// 移动内容区的 top 偏移量
				contentList.style.top = -index * (document.documentElement.clientHeight - head.offsetHeight) + "px";
			}
			
			headBind();
			contentBind();
			contentScroll()
			move()
			
			window.onresize=function(){
				move();
				contentBind();
			}
		}
	</script>
</html>
